<template>
  <div class="wrapper">
    <my-pro :fixed="setting.fixed"
            :logo="logo"
            :title="title"
            :mode="setting.layout"
            :menus="menus"
            :menu-props="{router: true, uniqueOpened: true}"
            v-bind="colorTheme"
            :collapsible="setting.collapsible"
            :rainbow="setting.rainbow"
            :version="version"
            :breadcrumb="createBreadcrumb">

      <!-- 头部工具按钮 -->
      <template v-slot:actions>
        <UserAction :username="nickname"
                    :extra="roleName"
                    :avatar="{theme: 'primary'}"></UserAction>
        <!-- <IconAction icon="el-icon-message-solid" :badge="12"></IconAction> -->
        <FullScreenAction :tooltip="true"></FullScreenAction>
        <IconAction icon="el-icon-setting"
                    :dropdown-items="dropdown"
                    :dropdown-options="{trigger:'click'}"
                    @command="handleUserCommand"></IconAction>
      </template>

      <!-- 加载子路由页面 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </my-pro>

    <!-- 角色选择 -->
    <!-- <div>
      <el-dialog title="切换角色" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
        <el-select v-model="roleId" placeholder="请选择" :style="{width: '100%'}">
          <el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="loginRole" type="primary" :loading="loadingRole">确 定</el-button>
        </span>
      </el-dialog>
    </div> -->

   <!-- 修改密码 -->
    <UpdatePassword ref="updatePasswordRef"></UpdatePassword>

  </div>
</template>

<script>
  import logo from '@/assets/shengxiangLogo_tm.png'
  import {MyPro} from '$ui'
  import {mapGetters} from 'vuex'
  import {findPath, find} from '$ui/utils/tree'
  const {IconAction, UserAction, FullScreenAction} = MyPro
  import UpdatePassword from '@/components/global/UpdatePassword.vue'

  export default {
    components: {
      MyPro,
      IconAction,
      UserAction,
      FullScreenAction,
      UpdatePassword
    },
    data() {
      return {
        setting: {
          skin: 'default',
          layout: 'sidebar',
          color: 'pro',
          fixed: true,
          collapsible: true,
          tab: false,
          breadcrumb: true,
          rainbow: true,
          invert: false
        },
        logo: logo,
        title: '光明地板管理平台',
        version:'',
        dropdown: [
          // {text: '个人信息',command: 'info'},
          // {text: '切换角色',command: 'role'},
          {text: '修改密码',command: 'password'},
          {divided: true,text: '注销登录',command: 'logout'},
        ],

        // 角色选择
        dialogVisible:false,
        roleId: undefined,
        loadingRole:false,
      }
    },
    computed: {
      colorTheme() {
        const {color, layout, skin} = this.setting
        const map = {
          simple: 'light',
          tech: 'dark',
          pro: 'black'
        }
        if (layout === 'sidebar') {
          return {
            sidebarTheme: map[color],
            navbarTheme: skin === 'dark' ? 'dark' : 'light'
          }
        }
        if (layout === 'navbar') {
          return {
            sidebarTheme: 'light',
            navbarTheme: map[color]
          }
        }

        if (layout === 'both') {
          return {
            navbarTheme: map[color],
            sidebarTheme: skin === 'dark' ? 'dark' : 'light'
          }
        }

        return {
          navbarTheme: 'light',
          sidebarTheme: 'light'
        }
      },
      ...mapGetters([
        'menus',
        'nickname',
        'roleName',
      ]),
    },
    methods: {
      handleUserCommand(cmd) {
        switch (cmd) {
          case 'info':
            //this.$router.push('/account/info')
            break
          case 'role':
            //this.roleId=this.currentRole.roleId;
            //this.loadingRole=false;
            //this.dialogVisible=true;
            break
          case 'password':
            this.$refs.updatePasswordRef.open();
            break
          case 'logout':
            this.$store.dispatch('user/logout').then(r => {
              this.$router.push('/login')
            })
            break
        }
      },
      createBreadcrumb(matched) {
        if (!this.setting.breadcrumb) return null
        var newIndex = matched.path;
        var paths = findPath(this.menus, (item, index) => {
          return item.index == newIndex;
        });
        var list = [];
        paths.forEach(x => list.push({
          label: x.text
        }));
        return list;
      },
    }
  }
</script>
